<template>
  <div class="app-container">
    <!-- 下拉选择学期 -->
    <div>
      <el-select
        class="semester-select"
        @change="handleSelectChange"
        v-model="value"
        placeholder="请选择学期"
      >
        <el-option
          v-for="(item, index) in semesterData"
          :key="index"
          :value="item.id"
          :label="item.semesterName"
        ></el-option>
      </el-select>
      <!-- 执行排课 -->
      <el-button
        style="margin-left: 10px"
        type="primary"
        :disabled="id==null"
        :loading="loading"
        @click="comfirmArrangeCourse"
        >执行排课算法<i class="el-icon-s-tools el-icon--right"></i
      ></el-button>
    </div>
    <br />

    <!-- 展示上传后的结果 -->
    <el-table
      v-loading="listLoading"
      :data="
        list
          .filter((data) => true)
          .slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="40px">
        <template slot-scope="scope">
          {{ scope.$index + 1 + (currentPage - 1) * pagesize }}
        </template>
      </el-table-column>
      <el-table-column label="班级编号" prop="classNo" align="center">
        <template slot-scope="scope">
          {{ scope.row.classNo }}
        </template>
      </el-table-column>
      <el-table-column label="班级名" prop="className" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.className }}</span>
        </template>
      </el-table-column>
      <el-table-column label="教师编号" prop="teacherNo" align="center">
        <template slot-scope="scope">
          {{ scope.row.teacherNo }}
        </template>
      </el-table-column>
      <el-table-column label="教师姓名" prop="teacherName" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.teacherName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="课程编号" prop="courseNo" align="center">
        <template slot-scope="scope">
          {{ scope.row.courseNo }}
        </template>
      </el-table-column>
      <el-table-column label="课程名" prop="courseName" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.courseName }}</span>
        </template>
      </el-table-column>

      <!-- 其他字段 -->
      <el-table-column label="课程属性" prop="courseAttr" align="center">
        <template slot-scope="scope">
          {{ scope.row.courseAttr }}
        </template>
      </el-table-column>

      <el-table-column label="总周数" prop="weeksSum" align="center">
        <template slot-scope="scope">
          {{ scope.row.weeksSum }}
        </template>
      </el-table-column>
      <el-table-column label="周学时" prop="weeksNumber" align="center">
        <template slot-scope="scope">
          {{ scope.row.weeksNumber }}
        </template>
      </el-table-column>

      <el-table-column label="开始周" prop="startWeek" align="center">
        <template slot-scope="scope">
          {{ scope.row.startWeek }}
        </template>
      </el-table-column>
      <el-table-column label="结束周" prop="endWeek" align="center">
        <template slot-scope="scope">
          {{ scope.row.endWeek }}
        </template>
      </el-table-column>
      <el-table-column label="单双周" prop="biweekly" align="center">
        <template slot-scope="scope">
          {{ scope.row.biweekly }}
        </template>
      </el-table-column>
      <el-table-column label="教学区域编号" prop="areaNo" align="center">
        <template slot-scope="scope">
          {{ scope.row.areaNo }}
        </template>
      </el-table-column>
      <el-table-column label="同时上课班数" prop="classCount" align="center">
        <template slot-scope="scope">
          {{ scope.row.classCount }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 1rem; margin-left: 0.4rem"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.filter((data) => true).length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        2: "success",
        0: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      classTaskData: [],
      semesterData: [],
      list: null,
      listLoading: true,
      value: "",
      id:null,
      search: "",
      total: 0,
      currentPage: 1,
      currentIndex: "",
      pagesize: 10,
      loading: false
    };
  },
  created() {
    this.allClassTask();
    this.getSemester();
  },
  methods: {
    getList() {
      // this.listLoading = true;
      this.$axios
        .get("/task/getList", {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.getSemester();
          this.list = res.data.data;
          // this.semesterData = ret;
          if (this.list.length == 0) {
            this.$message({ message: "暂无课程", type: "success" });
          }
          this.listLoading = false;
        });
    },
    // 手动添加课程任务
    addClassTask() {
      this.visible = true;
    },
    comfirmArrangeCourse() {
      var item = null
      for(var i in this.semesterData) {
        if (this.semesterData[i].id == this.id) {
          item = this.semesterData[i]
        }
      }
      if (item.semesterStatus == 1) {
        this.$confirm('该学期已排课，坚持排课将覆盖之前排课内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.arrangeCourse()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消排课'
          });          
        });
      } else {
        this.arrangeCourse()
      }    
    },
    // 点击开始提交学期到系统后台排课
    arrangeCourse() {
      this.loading = true;
      let id = this.id;
      this.$message({ message: "开始排课", type: "info" });
      this.$axios
        .post("/task/autoSchedule/"+id , {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.allClassTask();
          this.$message({ message: "排课成功", type: "success" });
          this.$store.commit('SET_SEMESTERID', this.id);
          this.$router.push("/scheduling/handle");
          this.loading = false
        })
        .catch((error) => {
          console.log(error)
          this.$message.error("排课失败");
          this.loading = false
        });
    },
    // 清除学期
    // clearListener() {
    //   this.value = "";
    //   this.getList();
    // },
    // 上传成功
    uploadSuccess(response, file, fileList) {
      this.loading = false;
      this.getList();
      this.$message({ message: "上传成功", type: "success" });
    },
    // 提交上传文件事件
    submitUpload() {
      this.loading = true;
      this.$refs.upload.submit();
    },
    // 得到对应选中的年级
    handleSelectChange(val) {
      // 这里的V就是选择的学期id
      this.id = val;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.allClassTask();
    },
    /**
     * 获得学期列表后默认填充第一个到学期选择下拉列表中
     * 这里只放一个学期先吧
     */
    getSemester() {
      this.listLoading = true;
      this.$axios
        .get("/semester/getList")
        .then((res) => {
          let ret = res.data.data;
          // this.semesterData = ret;
          for (let index = 0; index < ret.length; index++) {
            const item = ret[index];
            this.semesterData[index] = item;
          }
        })
        .catch((error) => {
          console.log("查询学期失败");
        });
    },

    /**
     * 获得所有开课任务
     */
    allClassTask() {
      this.listLoading = true;
      this.$axios
        .get("/task/getList", {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.list = res.data.data;
          this.classTaskData = this.list.records;
          if (this.list.length == 0) {
            this.$message({ message: "查询不到开课任务", type: "success" });
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("查询开课任务失败");
        });
    },
  },
};
</script>
